<template>
  <el-dialog
    title="定时任务设置"
    :visible.sync="dialogVisible"
    width="80%"
  >
    <div style="height: 400px">
      <component :is="templateName" v-if="templateName" :template="template" @fetch-data="callBack" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'TaskSettingIndex',
  data() {
    return {
      template: {},
      templateName: null,
      dialogVisible: false
    };
  },
  watch: {
    template: {
      handler(newName, oldName) { // 值发生变化时
        if (undefined !== newName &&
          undefined !== newName.dataType
        ) {
          const res = () => import(`./com/${newName.dataType}`);
          this.templateName = res;
        } else {
          this.templateName = null;
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initData(data) {
      this.template = data;
      this.dialogVisible = true;
    },
    callBack(data) {
      this.dialogVisible = false;
      this.$emit('fetch-data');
    }
  }
};
</script>

<style scoped>

</style>
